<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="container" id="container">
        <div class="item">
            <div class="menu"></div>
            <div class="gap"></div>
        </div>
        <div class="item">
            <div class="menu"></div>
            <div class="gap"></div>
        </div>
        <div class="item">
            <div class="menu"></div>
            <div class="gap"></div>
        </div>
        <div class="item">
            <div class="menu"></div>
            <div class="gap"></div>
        </div>
        <div class="item">
            <div class="menu"></div>
            <div class="gap"></div>
        </div>
        <div class="item">
            <div class="menu"></div>
            <div class="gap"></div>
        </div>
        <div class="item">
            <div class="menu"></div>
            <div class="gap"></div>
        </div>
        <div class="item">
            <div class="menu"></div>
            <div class="gap"></div>
        </div>
        <div class="item">
            <div class="menu"></div>
            <div class="gap"></div>
        </div>
        <div class="item">
            <div class="menu"></div>
            <div class="gap"></div>
        </div>
        <div class="item">
            <div class="menu"></div>
        </div>
    </div>
</body>

</html>
<script>
    let items = document.getElementsByClassName("item")
    for (let i = 0; i < items.length; i++) {
        items[i].onmouseover = function () {
            if (i == 0) {
                items[i].style = "--scale:1.5"
                items[i + 1].style = "--scale:1.2"
                items[i + 2].style = "--scale:1.1"
                for (let j = 0; j < items.length; j++) {
                    if (j != i && j != i + 1 && j != i + 2) {
                        items[j].style = "--scale:1"
                    }
                }
            } else if (i == 1) {
                items[i - 1].style = "--scale:1.2"
                items[i].style = "--scale:1.5"
                items[i + 1].style = "--scale:1.2"
                items[i + 2].style = "--scale:1.1"
                for (let j = 0; j < items.length; j++) {
                    if (j != i - 1 && j != i && j != i + 1 && j != i + 2) {
                        items[j].style = "--scale:1"
                    }
                }
            } else if (i == items.length - 1) {
                items[i - 2].style = "--scale:1.1"
                items[i - 1].style = "--scale:1.2"
                items[i].style = "--scale:1.5"
                for (let j = 0; j < items.length; j++) {
                    if (j != i && j != i - 1 && j != i - 2) {
                        items[j].style = "--scale:1"
                    }
                }
            } else if (i == items.length - 2) {
                items[i - 2].style = "--scale:1.1"
                items[i - 1].style = "--scale:1.2"
                items[i].style = "--scale:1.5"
                items[i + 1].style = "--scale:1.2"
                for (let j = 0; j < items.length; j++) {
                    if (j != i - 2 && j != i - 1 && j != i && j != i + 1) {
                        items[j].style = "--scale:1"
                    }
                }
            } else {
                items[i - 2].style = "--scale:1.1"
                items[i - 1].style = "--scale:1.2"
                items[i].style = "--scale:1.5"
                items[i + 1].style = "--scale:1.2"
                items[i + 2].style = "--scale:1.1"
                for (let j = 0; j < items.length; j++) {
                    if (j != i - 2 && j != i - 1 && j != i && j != i + 1 && j != i + 2) {
                        items[j].style = "--scale:1"
                    }
                }
            }
        }
    }

    let container = document.getElementById("container")
    container.onmouseleave = function () {
        for (let h = 0; h < items.length; h++) {
            items[h].style = "--scale:1"
        }
    }
</script>
<style>
    body {
        margin: 0;
        padding: 0;
    }

    .container {
        margin: auto;
        padding: 15px;
        position: fixed;
        left: 50%;
        translate: -50% 0;
        top: 0;
        bottom: 20px;
        height: 80px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 20px;
        display: flex;
        align-items: flex-end;
        box-sizing: border-box;
    }

    .item {
        --scale: 1;
        padding-top: calc((var(--scale) * 50px) - (50px / var(--scale)));
        height: 100%;
        display: flex;
        /* align-items: flex-end; */
        transition: all 0.35s;
    }

    .menu {
        width: calc(50px * var(--scale));
        height: calc(50px * var(--scale));
        background: #000;
        border-radius: calc(10px * var(--scale));
        transition: all 0.35s;
        cursor: pointer;
    }

    .gap {
        width: calc(15px * var(--scale));
        height: 50px;
        background: transparent;
        transition: all 0.35s;
    }
</style>